import React from 'react'
import './ViewItem.scss'
import {Link} from 'react-router-dom'

class ViewItem extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            title: props.data.title,
            type:props.data.type,
            url:props.data.url,
            texturl:props.data.text,
            imgurl:props.data.imgurl
        }
        this.clickhandle = this.clickhandle.bind(this);
    }
    clickhandle() {
        // this.setState({ title: this.state.title + "1" });
        console.log('to',this.state.url)
    }

    render() {
        return (
            <Link to={{
                pathname:'/show',
                state:{ifurl:this.state.url,texturl:this.state.texturl}
            }} className="viewitem-container" onClick={this.clickhandle} iframeurl={this.state.url}>
                <div className="viewitem-content">
                    <span className='viewitem-content-title'>{this.state.title}</span>
                    <span className='viewitem-content-icon'>{
                      this.state.type ==='0' ?"html+css":
                      this.state.type ==='1' ?"html+css+js":
                      this.state.type ==='2' ?"jquery":
                      this.state.type ==='3' ?"vue/react":"*"
                    }</span>
                    <div className="viewitem-content-show" style={{backgroundImage:`url("${this.state.imgurl}")`}}></div>
                </div>
            </Link>
        )
    }
}
export default ViewItem